:root {
	--tabbar-bg: white;
	--tabbar-radius: 0rem;
	--tabbar-padding: 0.6rem 0;
	--tabbar-border:#f2f6f9;
	--icon-size: 2.4rem;
	--tabbar-margin: 0rem;
	--badge-size: 1.6rem;
	--badge-font-size:1rem;
	--text-color: #bfbfbf;
	--active-color: #1296db;
	--badge-color: red;
	--badge-text: white;
	--ripple-color: rgba(18, 150, 219, 0.3);
	--ripple-duration: 0.6s;
}

.tabbar {
	display: flex;
	align-items: center;
	margin: var(--tabbar-margin);
	padding: var(--tabbar-padding);
	background: var(--tabbar-bg);
	border-radius: var(--tabbar-radius);
	font-size: var(--font-size-small);
	border-top: 1px solid var(--tabbar-border);
	/* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); */
}

.tabbar-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	color: var(--text-color);
	cursor: pointer;
	transition: color 0.3s;
	-webkit-tap-highlight-color: transparent;
}

.tabbar-icon {
	width: var(--icon-size);
	height: var(--icon-size);
	margin-bottom: 0.5rem;
	transition: transform 0.3s;
}

.tabbar-input {
	display: none;
	opacity: 0;
}

.tabbar-badge {
	width: var(--badge-size);
	height: var(--badge-size);
	line-height: var(--badge-size);
	text-align: center;
	background: var(--badge-color);
	border-radius: 50%;
	color: var(--badge-text);
	position: absolute;
	top: -0.5rem;
	left: 55%;
	font-size: var(--badge-font-size);
}

.tabbar-input:checked+.tabbar-item {
	color: var(--active-color);
}

/**
 * 以下是点击的时候添加水波纹效果，可以不用的
 */
.tabbar-item::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 5px;
	height: 5px;
	background: var(--ripple-color);
	opacity: 0;
	border-radius: 100%;
	transform: translate(-50%, -50%) scale(1);
	transition: transform var(--ripple-duration), opacity var(--ripple-duration);
	pointer-events: none;
}

.tabbar-input:checked+.tabbar-item::after,
.tabbar-item:active::after {
	animation: ripple var(--ripple-duration) ease-out;
}

@keyframes ripple {
	0% {
		transform: translate(-50%, -50%) scale(1);
		opacity: 0.5;
	}

	100% {
		transform: translate(-50%, -50%) scale(15);
		opacity: 0;
	}
}

.tabbar-input:checked+.tabbar-item .tabbar-icon {
	transform: scale(1.2);/* 放大1.2倍 */
}
